﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Element/Element.Shortcuts</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:isDisplayed">isDisplayed</a></div>
			<div class="menu-item"><a href="#Element:isVisible">isVisible</a></div>
			<div class="menu-item"><a href="#Element:toggle">toggle</a></div>
			<div class="menu-item"><a href="#Element:hide">hide</a></div>
			<div class="menu-item"><a href="#Element:show">show</a></div>
			<div class="menu-item"><a href="#Element:swapClass">swapClass</a></div>
			<div class="menu-item"><a href="#document:clearSelection">clearSelection</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Extends the <a href="../../core/Element/Element.html">Element</a> Type with some basic shortcuts (like .hide and .show).</p>

<h3>Tutorial/Demo</h3>

<ul>
<li><a href="http://www.clientcide.com/wiki/cnet-libraries/04-element/05-element.shortcuts">Online Tutorial/Demo</a></li>
</ul>
<h2 id="Element:isDisplayed"><a href="#Element:isDisplayed">Element Method: isDisplayed</a></h2>

<p class="description">Returns the state of the display of the element.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">isDisplayed</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>boolean</em>) true if display != "none", false if display == "none".</li>
</ul>
<h2 id="Element:isVisible"><a href="#Element:isVisible">Element Method: isVisible</a></h2>

<p class="description">Determines if an element is displayed using offset height/width. If both of these are zero it usually means the element is not displayed or one of its parent's is not.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">isVisible</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>boolean</em>) true if visible, false if not visible.</li>
</ul>
<h2 id="Element:toggle"><a href="#Element:toggle">Element Method: toggle</a></h2>

<p class="description">Toggles the state of an element from hidden (display = none) to visible (display = what it was previously or else display = block)</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">toggle</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h2 id="Element:hide"><a href="#Element:hide">Element Method: hide</a></h2>

<p class="description">Hides an element (display = none).</p>

<h3>Example</h3>

<pre class="javascript">myElement.<span class="me1">hide</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//same as $(id).setStyle('display', 'none');</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h2 id="Element:show"><a href="#Element:show">Element Method: show</a></h2>

<p class="description">Shows an element.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">show</span><span class="br0">(</span>displayString<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>displayString - (<em>string</em>) Display value; defaults to what it was previously if <a href="#Element:hide">Element:hide</a> was called on the element, otherwise defaults to "block".</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">$<span class="br0">(</span>id<span class="br0">)</span>.<span class="me1">show</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//same as $(id).setStyle('display', 'block');</span>
$<span class="br0">(</span>id<span class="br0">)</span>.<span class="me1">show</span><span class="br0">(</span><span class="st0">'inline'</span><span class="br0">)</span>; <span class="co1">//same as $(id).setStyle('display','inline');</span>
</pre>

<h2 id="Element:swapClass"><a href="#Element:swapClass">Element Method: swapClass</a></h2>

<p class="description">Removes one class and adds the other. If the one to remove is not found the one to add is still added.</p>

<h3>Syntax</h3>

<pre class="javascript">myElement.<span class="me1">swapClass</span><span class="br0">(</span>removeClass, addClass<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>removeClass - (<em>string</em>) the css class to remove.</li>
<li>addClass - (<em>string</em>) the css class to add.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h3>Example</h3>

<pre class="javascript">$<span class="br0">(</span>id<span class="br0">)</span>.<span class="me1">swapClass</span><span class="br0">(</span><span class="st0">'green'</span>, <span class="st0">'blue'</span><span class="br0">)</span>; <span class="co1">// removes green, adds blue</span>
</pre>

<h2 id="document:clearSelection"><a href="#document:clearSelection">Static Method: document.clearSelection</a></h2>

<p class="description">Removes any document selection (text selection). <strong>Can only be called on document</strong>.</p>

<h3>Syntax</h3>

<pre class="javascript">document.<span class="me1">clearSelection</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>nothing</li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
